<template>
	<PageWrapper title="表单基础示例" contentFullHeight>
		<CollapseContainer title="基础示例">
			<BasicForm
				autoFocusFirstItem
				:labelWidth="200"
				:schemas="schemas"
				:actionColOptions="{ span: 24 }"
				@submit="handleSubmit"
				@reset="handleReset"
			>
				<template #selectA="{ model, field }">
					<a-select
						:options="optionsA"
						mode="multiple"
						v-model:value="model[field]"
						@change="valueSelectA = model[field]"
						allowClear
					/>
				</template>
				<template #selectB="{ model, field }">
					<a-select
						:options="optionsB"
						mode="multiple"
						v-model:value="model[field]"
						@change="valueSelectB = model[field]"
						allowClear
					/>
				</template>
				<template #localSearch="{ model, field }">
					<ApiSelect
						:api="getInspectUnitList"
						:params="{ type: 'SecurityInspectUnit' }"
						showSearch
						allowClear
						v-model:value="model[field]"
						optionFilterProp="label"
						resultField="data"
						labelField="name"
						valueField="id"
					/>
				</template>
				<template #remoteSearch="{ model, field }">
					<ApiSelect
						:api="getInspectUnitList"
						showSearch
						allowClear
						v-model:value="model[field]"
						:filterOption="false"
						resultField="data"
						labelField="name"
						valueField="id"
						:params="searchParams"
						@search="onSearch"
					/>
				</template>
			</BasicForm>
		</CollapseContainer>
	</PageWrapper>
</template>
<script lang="ts">
import { computed, defineComponent, unref, ref } from 'vue';
import { BasicForm, ApiSelect, CollapseContainer, PageWrapper } from '#/components';
import type { FormSchema } from '#/types';
import { DeptPersonTreeSelect } from '@/components/TreeSelect';
import { useMessage } from '@/hooks/web/useMessage';
import { useDebounceFn } from '@vueuse/core';
import { Select } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import { getInspectUnitList, getPrincipaltree } from '@/api/demo';

const valueSelectA = ref<string[]>([]);
const valueSelectB = ref<string[]>([]);
const options = ref<Recordable[]>([]);
for (let i = 1; i < 10; i++) options.value.push({ label: '选项' + i, value: `${i}` });

const optionsA = computed(() => {
	return cloneDeep(unref(options)).map(op => {
		op.disabled = unref(valueSelectB).indexOf(op.value) !== -1;
		return op;
	});
});
const optionsB = computed(() => {
	return cloneDeep(unref(options)).map(op => {
		op.disabled = unref(valueSelectA).indexOf(op.value) !== -1;
		return op;
	});
});

const provincesOptions = [
	{
		id: 'guangdong',
		label: '广东省',
		value: '1',
		key: '1',
	},
	{
		id: 'jiangsu',
		label: '江苏省',
		value: '2',
		key: '2',
	},
];
const citiesOptionsData = {
	guangdong: [
		{
			label: '珠海市',
			value: '1',
			key: '1',
		},
		{
			label: '深圳市',
			value: '2',
			key: '2',
		},
		{
			label: '广州市',
			value: '3',
			key: '3',
		},
	],
	jiangsu: [
		{
			label: '南京市',
			value: '1',
			key: '1',
		},
		{
			label: '无锡市',
			value: '2',
			key: '2',
		},
		{
			label: '苏州市',
			value: '3',
			key: '3',
		},
	],
};

const schemas: FormSchema[] = [
	{
		field: 'divider-basic',
		component: 'Divider',
		label: '基础字段',
	},
	{
		field: 'field1',
		component: 'Input',
		label: '字段1',
		colProps: {
			span: 8,
		},
		componentProps: ({ schema, formModel }) => {
			console.log('form:', schema);
			console.log('formModel:', formModel);
			return {
				placeholder: '自定义placeholder',
				onChange: (e: any) => {
					console.log('字段1change', e);
				},
			};
		},
		renderComponentContent: () => {
			return {
				prefix: () => 'pSlot',
				suffix: () => 'sSlot',
			};
		},
	},
	{
		field: 'field2',
		component: 'Input',
		label: '带后缀',
		required: true,
		colProps: {
			span: 8,
		},
		componentProps: {
			onChange: (e: any) => {
				console.log('带后缀change 事件', e);
			},
		},
		suffix: '天',
	},
	{
		field: 'field3',
		component: 'DatePicker',
		label: '字段3',
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field4',
		component: 'Select',
		label: '字段4',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
					key: '1',
				},
				{
					label: '选项2',
					value: '2',
					key: '2',
				},
			],
		},
	},
	{
		field: 'field5',
		component: 'CheckboxGroup',
		label: '字段5',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
				},
				{
					label: '选项2',
					value: '2',
				},
			],
		},
	},
	{
		field: 'field6',
		component: 'RadioGroup',
		label: '有默认值',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
				},
				{
					label: '选项2',
					value: '2',
				},
			],
		},
		defaultValue: '1',
	},
	{
		field: 'field7',
		component: 'RadioGroup',
		label: '字段7',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
				},
				{
					label: '选项2',
					value: '2',
				},
			],
		},
	},
	{
		field: 'field8',
		component: 'Checkbox',
		label: '字段8',
		colProps: {
			span: 8,
		},
		renderComponentContent: 'Check',
	},
	{
		field: 'field9',
		component: 'Switch',
		label: '字段9',
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field10',
		component: 'RadioButtonGroup',
		label: '字段10',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
				},
				{
					label: '选项2',
					value: '2',
				},
			],
		},
	},
	{
		field: 'field11',
		component: 'Cascader',
		label: '联动选择框',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					value: 'zhejiang',
					label: 'Zhejiang',
					children: [
						{
							value: 'hangzhou',
							label: 'Hangzhou',
							children: [
								{
									value: 'xihu',
									label: 'West Lake',
								},
							],
						},
					],
				},
				{
					value: 'jiangsu',
					label: 'Jiangsu',
					children: [
						{
							value: 'nanjing',
							label: 'Nanjing',
							children: [
								{
									value: 'zhonghuamen',
									label: 'Zhong Hua Men',
								},
							],
						},
					],
				},
			],
		},
	},
	{
		field: 'divider-api-select',
		component: 'Divider',
		label: '远程下拉演示',
	},
	{
		field: 'field30',
		component: 'ApiSelect',
		label: '懒加载远程下拉',
		required: true,
		rulesMessageJoinLabel: true,
		componentProps: {
			// more details see /src/BasicComp/Form/src/components/ApiSelect.vue
			api: getInspectUnitList,
			params: {
				type: 'SecurityInspectUnit',
			},
			resultField: 'data',
			// use name as label
			labelField: 'name',
			// use id as value
			valueField: 'id',
			// select时触发
			immediate: false,
			onChange: e => {
				console.log('懒加载远程下拉 selected:', e);
			},
			// 获取数据后
			onOptionsChange: options => {
				console.log('懒加载远程下拉 optionsChange', options);
			},
		},
		colProps: {
			span: 11,
		},
	},
	{
		field: 'field31',
		component: 'Input',
		label: '远程下拉框支持本地搜索',
		helpMessage: ['ApiSelect组件', '远程请求数据在本地搜索', '只发起一次请求获取所有选项'],
		required: true,
		slot: 'localSearch',
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field32',
		component: 'Input',
		label: '下拉远程搜索',
		// 请在network中查看请求参数
		helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
		required: true,
		slot: 'remoteSearch',
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field33',
		component: 'ApiTreeSelect',
		label: '远程下拉树',
		helpMessage: ['ApiTreeSelect组件', '使用接口提供的数据生成选项'],
		required: true,
		componentProps: {
			api: getPrincipaltree,
			resultField: 'data',
			fieldNames: { label: 'name', key: 'deptId', value: 'deptId' },
			onChange: e => {
				console.log('远程下拉树 onChange:', e);
			},
			onOptionsChange: options => {
				console.log('远程下拉树 optionsChange', options);
			},
		},
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field100',
		component: 'DeptPersonTreeSelect',
		label: '远程下拉部门人员树',
		required: true,
		colProps: {
			span: 8,
		},
		componentProps: {
			api: getPrincipaltree,
			resultField: 'data',
			showSearch: true,
			allowClear: true,
			treeCheckable: true,
			onChange: e => {
				console.log('远程下拉部门人员树 onChange:', e);
			},
			onOptionsChange: options => {
				console.log('远程下拉部门人员树 optionsChange', options);
			},
			onLabelChange: e => {
				console.log('远程下拉部门人员树 onLabelChange:', e);
			},
		},
	},
	{
		field: 'field34',
		component: 'ApiRadioGroup',
		label: '远程Radio',
		helpMessage: ['ApiRadioGroup组件', '使用接口提供的数据生成选项'],
		required: true,
		componentProps: {
			api: getPrincipaltree,
			resultField: 'data',
			// use name as label
			labelField: 'name',
			// use id as value
			valueField: 'deptId',
		},
		defaultValue: '1',
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field35',
		component: 'ApiRadioGroup',
		label: '远程Radio',
		helpMessage: ['ApiRadioGroup组件', '使用接口提供的数据生成选项'],
		required: true,
		componentProps: {
			api: getPrincipaltree,
			resultField: 'data',
			// use name as label
			labelField: 'name',
			// use id as value
			valueField: 'deptId',
			isBtn: true,
		},
		colProps: {
			span: 8,
		},
	},
	{
		field: 'divider-linked',
		component: 'Divider',
		label: '字段联动',
	},
	{
		field: 'province',
		component: 'Select',
		label: '省份',
		colProps: {
			span: 8,
		},
		componentProps: ({ formModel, formActionType }) => {
			return {
				options: provincesOptions,
				placeholder: '省份与城市联动',
				onChange: (e: any) => {
					// console.log(e)
					let citiesOptions =
						e == 1 ? citiesOptionsData[provincesOptions[0].id] : citiesOptionsData[provincesOptions[1].id];
					// console.log(citiesOptions)
					if (e === undefined) {
						citiesOptions = [];
					}
					formModel.city = undefined; //  reset city value
					const { updateSchema } = formActionType;
					updateSchema({
						field: 'city',
						componentProps: {
							options: citiesOptions,
						},
					});
				},
			};
		},
	},
	{
		field: 'city',
		component: 'Select',
		label: '城市',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [], // defalut []
			placeholder: '省份与城市联动',
		},
	},
	{
		field: 'divider-selects',
		component: 'Divider',
		label: '互斥多选',
		helpMessage: ['两个Select共用数据源', '但不可选择对方已选中的项目'],
	},
	{
		field: 'selectA',
		component: 'Select',
		label: '互斥SelectA',
		slot: 'selectA',
		defaultValue: [],
		colProps: {
			span: 8,
		},
	},
	{
		field: 'selectB',
		component: 'Select',
		label: '互斥SelectB',
		slot: 'selectB',
		defaultValue: [],
		colProps: {
			span: 8,
		},
	},
	{
		field: 'divider-others',
		component: 'Divider',
		label: '其它',
	},
	{
		field: 'field20',
		component: 'InputNumber',
		label: '字段20',
		required: true,
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field21',
		component: 'Slider',
		label: '字段21',
		componentProps: {
			min: 0,
			max: 100,
			range: true,
			marks: {
				20: '20°C',
				60: '60°C',
			},
		},
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field22',
		component: 'Rate',
		label: '字段22',
		defaultValue: 3,
		colProps: {
			span: 8,
		},
		componentProps: {
			disabled: false,
			allowHalf: true,
		},
	},
];

export default defineComponent({
	components: { BasicForm, CollapseContainer, PageWrapper, ApiSelect, ASelect: Select, DeptPersonTreeSelect },
	setup() {
		const check = ref(null);
		const { createMessage } = useMessage();
		const keyword = ref<string>('');
		const searchParams = computed<Recordable>(() => {
			return { keyword: unref(keyword) };
		});

		function onSearch(value: string) {
			keyword.value = value;
		}
		return {
			schemas,
			getInspectUnitList,
			optionsA,
			optionsB,
			valueSelectA,
			valueSelectB,
			onSearch: useDebounceFn(onSearch, 300),
			searchParams,
			handleReset: () => {
				keyword.value = '';
			},
			handleSubmit: (values: any) => {
				createMessage.success('提交成功，请在控制台查看');
				console.log(values);
			},
			getPrincipaltree,
			check,
		};
	},
});
</script>
